<template>
  <div class="personal-data">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <header id="header" class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">个人资料</h1>
        </header>
        <div class="mui-content">
          <ul class="mui-table-view user-info-list">
            <li class="mui-table-view-cell mui-media">
              <a class="mui-navigate-right info-list-item">
                <div class="mui-media-body img-text">会员头像</div>
                <z-upload class="user-avatar-upload"
                          paddingbot="16%"
                          showtype="notself"
                          :uploadUrl="uploadUrl"
                          imgname="avatar"
                          @getfile="getfile"
                          :repeatable="true"></z-upload>
                <img class="mui-media-object mui-pull-right item-right" :src="getAvatar" preview="100">
              </a>
            </li>
            <li class="mui-table-view-cell info-list-item">
              <div class="mui-media-body">姓名</div>
              <div class="item-right">{{userInfo.realname}}</div>
            </li>
            <li class="mui-table-view-cell info-list-item">
              <div class="mui-media-body">手机</div>
              <div class="item-right">{{userInfo.mobile}}</div>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right info-list-item" v-tap="{method:editNickname}">
                <div class="mui-media-body">昵称</div>
                <div class="item-right">{{userInfo.nickname}}</div>
              </a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right info-list-item" v-tap="{method:editBirthday}">
                <div class="mui-media-body">生日</div>
                <div class="item-right">{{trTime(userInfo.birthday)}}</div>
              </a>
            </li>
          </ul>
          <ul class="mui-table-view user-info-list user-gender">
            <li class="mui-table-view-cell" v-tap="{method:editGender}">
              <a class="mui-navigate-right info-list-item">
                <div class="mui-media-body">性别</div>
                <div class="item-right">{{getGender}}</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ZUpload from '@/components/z-upload'
  export default {
    data(){
      return{
        avatar:'',
        avatarMan:'',
        avatarWoman:'',
        userInfo:{
          avatar:'',
        },
        uploadUrl:'',
        deleteUrl:'',
        deleteOldAvatar:false,
      }
    },
    components:{
      ZUpload
    },
    created(){
      var that = this;
      that.userInfo=that.clone(that.$store.state.user.userInfo);
      that.avatarMan=that.$store.state.user.avatarMan;
      that.avatarWoman=that.$store.state.user.avatarWoman;
      that.uploadUrl=that.$http.adornUrl(that.$api.SysUpload);
      that.deleteUrl=that.$http.adornUrl(that.$api.SysDelete);
    },
    mounted(){
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005
      });
    },
    updated(){
      var that = this;
      var userInfo = that.clone(that.userInfo);
      that.$store.commit('user/updateUserInfo',userInfo);
      userInfo=null;
    },
    computed:{
      //转换用户身份
      getUserType(){
        var that = this;
        var userType='游客';
        if(that.userInfo && that.userInfo.user_level_id){
          switch (that.userInfo.user_level_id){
            case 1:
              userType='消费者';
              break;
            case 2:
              userType='笑笑商家';
              break;
            default:
              userType='游客';
          }
        }
        return userType;
      },
      //得到用户头像
      getAvatar(){
        var that = this;
        var avatar= that.userInfo.avatar?that.userInfo.avatar:(that.userInfo.gender==0?that.avatarWoman:that.avatarMan);
        return avatar;
      },
      //得到用户性别
      getGender(){
        var that = this;
        var gender='';
        if(that.userInfo){
          switch (that.userInfo.gender){
            case '1':
            case 1:
              gender='男';
              break;
            case '0':
            case 0:
              gender='女';
              break;
          }
        }
        return gender;
      },
    },
    methods:{
      //上传组件的参数接收方法
      getfile(imgname,imgs,files,res){
        var that = this;
        that.avatar = that.userInfo.avatar;
        that.deleteOldAvatar = true;
        if(res && res.errno==0){
          try{
            that.userInfo.avatar = res.data;
            that.userUpdate(that.userInfo);
          }catch (e) {}
        }
      },
      //转换生日信息
      trTime(inputTime){
        var text = '';
        if(inputTime){
          var date = new Date(inputTime);
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? ('0' + m) : m;
          var d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          text = y + '-' + m + '-' + d;
        }
        return text;
      },
      //删除头像照片
      delfile(img){
        var that = this;
        if(img){
          that.$http({url: that.deleteUrl,method:'post',params:that.$http.adornParams({'url':img})})
            .then(function(res){
              if(res.errno==0){
                that.deleteOldAvatar = false;
                mui.toast("更换成功")
              }
            })
        }
      },
      //用户信息更新
      userUpdate(userVo){
        var that = this;
        that.$http.post(that.$http.adornUrl(that.$api.UserUpdate), userVo).then(function(res){
          if(res.errno==0){
            if(that.deleteOldAvatar){
              that.delfile(that.avatar);
            }
          }
        });
      },
      //编辑昵称
      editNickname(){
        var that = this;
        that.deleteOldAvatar = false;
        mui.prompt('请填写昵称','昵称','提示',['取消','确认'],function(e){
          var text = e.value.replace(/\s/ig,'');
          if(e.index==1&&text){
            that.userInfo.nickname = text;
            that.userUpdate(that.userInfo);
          }
        })
      },
      //编辑生日
      editBirthday(){
        var that = this;
        that.deleteOldAvatar = false;
        var dtPicker = new mui.DtPicker({
          type:'date',
          beginDate:new Date(1950,12),
          endDate:new Date(2020,11),
        });
        dtPicker.show(function (selectItems) {
          that.userInfo.birthday = selectItems.value;
          that.userUpdate(that.userInfo);
        })
      },
      //编辑性别
      editGender(){
        var that = this;
        that.deleteOldAvatar = false;
        var picker = new mui.PopPicker();
        picker.setData([
          {value:'1',text:'男'},
          {value:'0',text:'女'},
        ]);
        picker.show(function (selectItems) {
          if(selectItems[0].value==that.userInfo.gender){
            return;
          }
          that.userInfo.gender = selectItems[0].value;
          that.userUpdate(that.userInfo);
        })
      },
      //对象深度克隆
      clone(obj){
        var that = this;
        if(obj === null) return null;
        if(typeof obj !== 'object') return obj;
        if(obj.constructor===Date) return new Date(obj);
        if(obj.constructor === RegExp) return new RegExp(obj);
        var newObj = new obj.constructor ();  //保持继承链
        for (var key in obj) {
          if (obj.hasOwnProperty(key)) {   //不遍历其原型链上的属性
            var val = obj[key];
            newObj[key] = typeof val === 'object' ? that.clone(val) : val; // 使用arguments.callee解除与函数名的耦合
          }
        }
        return newObj;
      },
  }
  }
</script>

<style scoped lang="less">
  .personal-data{
    background: #f4f4f4;
    height: auto;
    overflow: hidden;
    width: 100%;
    .mui-bar{
      background-color: #fff;
      .mui-title{
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 1px 6px #e6e6e6;
      box-shadow: 0 1px 6px #e6e6e6;
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group:before{
      height: 0;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .mui-content{
      .mui-table-view:before{
        height:0;
      }
      .mui-table-view:after{
        height:0;
      }
      .user-info-list{
        margin-top: 0;
        .info-list-item{
          display: flex;
          justify-content:space-between;
          font-size: 0.3rem;
          .img-text{
            line-height: 42px;
          }
          .item-right{
            color: #8e8e92;
            margin-right:0.6rem;
            z-index: 100;
          }
        }
        .mui-table-view-cell:after{
          left: 0;
          background-color: #f7e9de;
        }
        .user-avatar-upload{
          position: absolute;
          left: 0;
          top: 0;
          height:100%;
          width:100%;
        }
      }
      .user-gender{
        margin-top: 15px;
      }
    }
  }
</style>
